<template>
	<view class="page">
		<navbar :showMenu="false" :showBack="true" :isDocument="true" iconColor="balck">
			<text>余某</text>
		</navbar>
		
		<view class="tab">
			<text :class="currentPage == 0 ? 'active' : ''" @click="changeTab(0)">最近一周</text>
			<text :class="currentPage == 1 ? 'active' : ''" @click="changeTab(1)">所有时间</text>
			<view class="barLine" :style="{ left: barLeft + 'rpx', width: barWidth + 'rpx', transition: isClickTab ? '0.15s ease-in-out' : ''}"></view>
		</view>
		
		<swiper :duration="200" :current="currentPage" @transition="animateChange" @animationfinish="animationEnd" style="height: calc(100% - 360rpx)">
			<swiper-item>
				<Loading isFullScreen :active="loading" text="loading..."></Loading>
				<scroll-view scroll-y="true" style="width: 750rpx;height: 100%;">
					<view class="swiper-item">
						<view class="songItem" v-for="(item,index) in weekData" :key="index" @click="playMusic(item.song.id, 'week')">
							<view class="index">
								<text v-show="currentMusicId != item.song.id">{{index + 1}}</text>
								<image v-show="currentMusicId == item.song.id" src="/static/images/play-red.png" mode="widthFix"></image>
							</view>
							<view class="content">
								<text>{{item.song.name}}</text>
								<text>{{item.song.ar[0].name + item.song.al.name}}</text>
							</view>
							<view class="playCount" v-if="this.uid == myUid">
								<image src="/static/images/play.png" mode="widthFix"></image>
								<text>{{item.playCount}}次</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			
			<swiper-item>
				<scroll-view scroll-y="true" style="width: 750rpx;height: 100%;">
					<Loading isFullScreen :active="loading" text="loading..."></Loading>
					<view class="swiper-item">
						<view class="songItem" v-for="(item,index) in allData" :key="index" @click="playMusic(item.song.id, 'all')">
							<view class="index">
								<text v-show="currentMusicId != item.song.id">{{index + 1}}</text>								<image v-show="currentMusicId == item.song.id" src="/static/images/play-red.png" mode="widthFix"></image>
							</view>
							<view class="content">
								<text>{{item.song.name}}</text>
								<text>{{item.song.ar[0].name + item.song.al.name}}</text>
							</view>
							<view class="playCount" v-if="this.uid == myUid">
								<image src="/static/images/play.png" mode="widthFix"></image>
								<text>{{item.playCount}}次</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		
		<playMusicBar></playMusicBar>
	</view>
</template>

<script>
	import Navbar from '@/components/navbar.vue'
	import Loading from '@/components/loading/loading.vue'
	import { mapState, mapMutations } from 'vuex'
	import { getUserRecord } from '@/api/user.js'
	export default {
		components: {
			Navbar,
			Loading
		},
		data() {
			return {
				uid: '',
				myUid: '',
				currentPage: 0,
				barLeft: 150,
				barWidth: 112,
				isClickTab: false,
				musicId: '',
				loading: true,
				weekData: [],
				allData: []
			}
		},
		onLoad(data) {
			this.myUid = uni.getStorageSync('userInfo').account.id
			this.uid = data.id ? data.id : uni.getStorageSync('userInfo').account.id
			this.getUserRecord(1)
			// console.log(playMusic)
		},
		watch:{
			currentPage(e) {
				// if(e == 0 && this.weekData.length == 0) {
				// 	this.getUserRecord(1)
				// } else if(e == 1 && this.allData.length == 0) {
				// 	this.getUserRecord(0)
				// }
			}
		},
		computed: {
			...mapState(['pixelRatio', 'currentMusicId'])
		},
		methods: {
			...mapMutations(['changePlayList', 'changeCurrentMusicId']),
			// 点击tab栏
			changeTab(index) {
				const that = this
				that.currentPage = index
				that.isClickTab = true
				if(index == 1) {
					that.barLeft = 319
					that.barWidth = 168
					setTimeout(function() {
						that.barLeft = 488
						that.barWidth = 112
					},150)
				} else {
					that.barLeft = 319
					that.barWidth = 168
					setTimeout(function() {
						that.barLeft = 150
						that.barWidth = 112
					},150)
				}
			},
			// swiper动画执行时
			animateChange(e) {
				if(!this.isClickTab) {
					let point = e.detail.dx * this.pixelRatio / 750
					if(this.currentPage == 0) {
						this.barLeft = 150 + 338 * point
					} else {
						this.barLeft = 488 - 338 * point * -1
					}
				}
			},
			// 滑动动画结束时触发
			animationEnd(e) {
				this.currentPage = e.detail.current
				this.isClickTab = false
				if(this.currentPage == 0 && this.weekData.length == 0) {
					this.getUserRecord(1)
				} else if(this.currentPage == 1 && this.allData.length == 0) {
					this.getUserRecord(0)
				}
			},
			// 获取听歌历史数据
			getUserRecord(type) {
				this.loading = true
				getUserRecord(this.uid, type).then(res => {
					type == 1 ? this.weekData = res.data.weekData : this.allData = res.data.allData
					this.loading = false
				}).catch(err => {
					this.loading = false
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
				})
			},
			// 播放音乐
			playMusic(id, list) {
				this.changeCurrentMusicId(id)
				if(list == 'week') {
					let data = []
					this.weekData.forEach(item => data.push(item.song))
					this.changePlayList(data)
				} else {
					let data = []
					this.allData.forEach(item => data.push(item.song))
					this.changePlayList(data)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100%;
		background-color: #fff!important;
	}
	.tab {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 750rpx;
		height: 80rpx;
		padding: 0 150rpx;
		margin-bottom: 20rpx;
		color: #666;
		text {
			width: 112rpx;
			display: block
		}
		.active {
			color: #000!important;
		}
		.barLine {
			position: absolute;
			left: 150rpx;
			bottom: 0;
			width: 112rpx;
			height: 8rpx;
			border-radius: 4rpx;
			background-color: $cloudMusic-tabActive-color;
		}
	}
	
	swiper {
		width: 100%;
		height: 1000rpx;
		.songItem {
			display: flex;
			align-items: center;
			width: 750rpx;
			height: 100rpx;
			padding: 10rpx 0;
			.index {
				display: flex;
				justify-content: center;
				align-items: center;
				flex: 1;
				height: 80rpx;
				color: #666;
				image {
					width: 30%;
				}
			}
			.content {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				flex: 5;
				text {
					display: block;
					&:first-child {
						
					}
					&:last-child {
						font-size: 24rpx;
						color: #666;
					}
				}
			}
			.playCount {
				display: flex;
				justify-content: center;
				align-items: center;
				flex: 1;
				font-size: 24rpx;
				color: #666;
				image {
					width: 24rpx;
					margin-right: 6rpx;
				}
			}
		}
	}
</style>
